<template>
	<view class="content">
		<view class="box-login">
			<!--  -->
			
			<image src="https://dummyimage.com/562x64/fff/2f915d?text=xitongdengluo" style="width: 562rpx;height: 64rpx;"></image>
			<view class="box-idcard" style="margin-top: 77rpx;">
				<tui-input isFillet inputBorder v-model="formData.idcard" placeholder="请输入身份证号" size="30rpx">
					<template #left>
						<tui-icon name="people" size="38rpx" style="margin-right: 20rpx;"></tui-icon>
					</template>
				</tui-input>
			</view>
			<view class="box-password" style="margin-top: 50rpx;">
				<tui-input v-model="formData.password" :password="ispassword" isFillet placeholder="请输入密码" size="30rpx">

					<template #left>
						<tui-icon name="pwd" size="38rpx" style="margin-right: 20rpx;"></tui-icon>
					</template>
					<template #right>
						<view class="" v-show="!ispassword">
							<tui-icon name="seen" size="38rpx" @click="ispassword=!ispassword"></tui-icon>
						</view>
						<view class="" v-show="ispassword">
							<tui-icon name="unseen" size="38rpx" @click="ispassword=!ispassword"></tui-icon>
						</view>
					</template>
				</tui-input>
			</view>
			<view class="tipbtn" style="margin-top: 32rpx;">
				<view @click="goto('/pages/login/reset')">忘记密码?</view>
				<view @click="goto('/pages/login/register')">去注册></view>
			</view>
			
			<view class="loginbtn" style="margin-top: 79rpx;">
				<tui-form-button :disabled="isloading" :loading="isloading" @click="onsubmit" radius="50rpx" size="24px"  background="#2F915D" text="登录"></tui-form-button>
			</view>
			<view class="kuaijiebtn" @click="onsubmitopenid" style="margin-top: 32rpx;">
				<text>手机号快捷登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// components:{
		// 		tuiIcon
		// 	},
		data() {
			return {
				isloading: false,
				formData: {
					// idcard: '',
					// password: ''
					idcard: '',
					password: ''
				},
				btntype: 3, //1登录 2注册
				ispassword: true,
			}
		},
		onLoad() {

		},
		methods: {
			onsubmit() {
				this.isloading = true;
				uni.$api.userloginApi(this.formData).then(res => {
					this.isloading = false;
					if (res.data && res.data.userinfo) {
						uni.$store.commit('index/settoken', res.data.userinfo.token) //打开微信新授权组件
						uni.$store.commit('index/setuserInfo', res.data.userinfo) //打开微信新授权组件
						if (res.data.userinfo.unionid == '') {
							console.log('没有unionid')
							uni.login({
								success: (res) => {
									if (res.code) {
										uni.$api.indexGetopenidApi({ code: res.code }).then(res => {
											uni.$store.dispatch('index/userInfoAsync', '') //存vuex了	
										})
									}
								}
							})
						}
						uni.$utils.goBack()
						uni.$emit("login_success");
					}
				}).catch(err => {
					this.isloading = false;
				})
			},
			// 手机号快捷登录
			onsubmitopenid() {
				uni.login({
					success: (res) => {
						if (res.code) {
							uni.$api.indexGetopenidApi({
								code: res.code
							}).then(res => {
								console.log(res)
							})
						}
					}
				})
			},
			goto(path) {
				// uni.$utils.goto(path);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		display: flex;
		// flex-direction: column;
		// align-items: center;
		justify-content: center;
		position: relative;
		// 登录
		.box-login {
			position: absolute;
			top: 230rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.box-idcard {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.box-password {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.tipbtn {
				width: 600rpx;
				display: flex;
				justify-content: space-between;
				color: #2F915D;
				font-size: 26rpx;
			}
			.loginbtn {
				width: 652rpx;
			}
			.kuaijiebtn {
				color: #2F915D;
			}
		}
		//注册
		.box-register {
			position: absolute;
			top: 230rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.box-idcard {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.box-password {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.tipbtn {
				align-items: center;
				width: 600rpx;
				display: flex;
				color: #2F915D;
				font-size: 26rpx;
			}
			.loginbtn {
				width: 652rpx;
			}
			.kuaijiebtn {
				color: #2F915D;
			}
			.box-mobile {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
				.mobile-tip {
					color: #2F915D;
					font-size: 30rpx;
				}
			}
		}
		//重置密码
		.box-reset {
			position: absolute;
			top: 230rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.box-idcard {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.box-password {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
			}
			.tipbtn {
				align-items: center;
				width: 600rpx;
				display: flex;
				color: #2F915D;
				font-size: 26rpx;
			}
			.loginbtn {
				width: 652rpx;
			}
			.kuaijiebtn {
				color: #2F915D;
			}
			.box-mobile {
				width: 652rpx;
				.u-input {
					height: 66rpx;
				}
				.mobile-tip {
					color: #2F915D;
					font-size: 30rpx;
				}
			}
		}
	}
</style>